<template>
    <div>
      <h1>事件修饰符</h1>
      <!-- 普通点击事件 -->
      <button @click="handleClick">点击我</button>
      <!-- 使用 stop 修饰符阻止事件冒泡 -->
      <button @click.stop="handleClick1">点击我1</button>
      <!-- 使用 stop 和 prevent 修饰符阻止事件冒泡和默认行为 -->
      <button @click.stop.prevent="handleClick2">点击我2</button>
      <!-- 使用 stop、prevent 和 self 修饰符 -->
      <button @click.stop.prevent.self="handleClick3">点击我3</button>
    </div>
  </template>
  
  <script setup>
  //import { ref } from "vue";
  
  // 普通点击事件处理函数
  const handleClick = (e) => {
    console.log(e);
    alert("点击我0");
  };
  
  // 使用 stop 修饰符的点击事件处理函数
  const handleClick1 = () => {
    console.log("点击我1");
  };
  
  // 使用 stop 和 prevent 修饰符的点击事件处理函数
  const handleClick2 = () => {
    console.log("点击我2");
  };
  
  // 使用 stop、prevent 和 self 修饰符的点击事件处理函数
  const handleClick3 = () => {
    console.log("点击我3");
  };
  </script>
  
  <style scoped>
  button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
  }
  </style>
  